
<template>
	<div class="layout-container-demo">
		<el-container>
			<el-aside width="200px">
				<menu-vue></menu-vue>
			</el-aside>
			<el-container>
				<el-header style="text-align: right; font-size: 12px">
					<div class="toolbar">
						<el-dropdown>
							<el-icon style="margin-right: 8px; margin-top: 1px">
								<setting />
							</el-icon>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item>View</el-dropdown-item>
									<el-dropdown-item>Add</el-dropdown-item>
									<el-dropdown-item>Delete</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
						<span>Tom</span>
					</div>
				</el-header>
				<el-main>
					<tab-vue></tab-vue>
					<el-scrollbar>
						<!-- <router-view></router-view> -->
					</el-scrollbar>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script lang="ts" setup>

//导入图标
import {Document, Menu as IconMenu, Setting} from '@element-plus/icons-vue'
//导入菜单
import MenuVue from './components/Menu.vue'	
import TabVue from './components/Tab.vue'
	
</script>

<style scoped>
	.layout-container-demo .el-header {
		position: relative;
		background-color: var(--el-color-primary-light-7);
		color: var(--el-text-color-primary);
	}

	.layout-container-demo .el-aside {
		color: var(--el-text-color-primary);
		background: var(--el-color-primary-light-8);
	}

	.layout-container-demo .el-menu {
		border-right: none;
	}

	.layout-container-demo .el-main {
		padding: 0;
	}

	.layout-container-demo .toolbar {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		right: 20px;
	}
</style>